import React from 'react';
import { useNavigate } from 'react-router-dom'; // 引入路由导航
import './Header.css';

const Header: React.FC = () => {
  const navigate = useNavigate();

  // 退出登录处理（可根据实际需求添加清除token、缓存等逻辑）
  const handleLogout = () => {
    // 1. 清除本地存储的用户信息/token（示例）
    localStorage.removeItem('userInfo');
    localStorage.removeItem('authToken');
    
    // 2. 跳转到登录页
    navigate('/login');
  };

  return (
    <header className="layout-header">
      <div className="header-inner">
        {/* 左侧标题 */}
        <div className="header-title">系统名称</div>
        
        {/* 右侧退出按钮（通过margin-left: auto 推到右上角） */}
        <button 
          className="logout-btn"
          onClick={handleLogout}
        >
          退出登录
        </button>
      </div>
    </header>
  );
};

export default Header;